<!doctype html>
<html>
	<head>
		<meta charset="utf-8">
		<title>欢迎进入</title>
		<meta name="viewport" content="width=device-width,height=device-height,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no,viewport-fit=cover" />
		<link href="../Common/css/mui.css" rel="stylesheet" />
		<link href="../Common/css/ufun.css" type="text/css" rel="stylesheet" />
		<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/css/materialize.min.css">
		<script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/js/materialize.min.js"></script>
		<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
		<script src="../Common/js/tools.js"></script>
		<style type="text/css">
			body {
				font-family: "Source Han Sans CN";
				background-color: #fff;
				overflow-x: hidden;
				overflow-y: hidden;
				padding-left: env(safe-area-inset-left);
				padding-right: env(safe-area-inset-right);
			}

			.wel-img {
				margin: 15vh auto 0 auto;
				text-align: center;
			}

			.wel-img img {
				width: 30vh;
			}

			@-webkit-keyframes fadeInOut {
				0% {
					opacity: 0;
				}

				50% {
					opacity: 1;
				}
			}

			.wel-img {
				-webkit-animation-name: fadeInOut;
				-webkit-animation-timing-function: ease-in-out;
				-webkit-animation-iteration-count: 1;
				-webkit-animation-duration: 3s;
				-webkit-animation-direction: alternate;
			}

			.wel-title {
				-webkit-animation-name: fadeInOut;
				-webkit-animation-timing-function: ease-in-out;
				-webkit-animation-iteration-count: 1;
				-webkit-animation-duration: 5s;
				-webkit-animation-direction: alternate;
			}


			@keyframes scaleDraw {

				/*定义关键帧、scaleDrew是需要绑定到选择器的关键帧名称*/
				0% {
					transform: scale(1);
					/*开始为原始大小*/
				}

				25% {
					transform: scale(1.1);
					/*放大1.1倍*/
				}

				50% {
					transform: scale(1);
				}

				75% {
					transform: scale(1.1);
				}
			}

			.wel-enter {
				-webkit-animation-name: scaleDraw;
				/*关键帧名称*/
				-webkit-animation-timing-function: ease-in-out;
				/*动画的速度曲线*/
				-webkit-animation-iteration-count: infinite;
				/*动画播放的次数*/
				-webkit-animation-duration: 5s;
				/*动画所花费的时间*/
			}


			.wel-title {
				align-items: center;
				text-align: center;
				margin: 6vh auto 0 auto;
				line-height: 7vh;
			}

			.wel-title a {
				color: var(--color-yellow);
				font-size: 5vw;
			}

			.wel-enter {
				text-align: center;
				margin: 20vh auto 0 auto;
			}


			.wel-enter a {
				color: var(--color-yellow);
				font-size: 7vw;
			}
		</style>
	</head>
	<body>
		<div class="wel-img">
			<img src="img/pic-welcome.svg">
		</div>
		<div class="wel-title">
			<a id="Line1">欢迎来到Ufun的世界</a>
			<br>
			<a id="Line2">一起来成为这个世界的牛人吧！</a>
		</div>
		<div class="wel-enter">
			<a href="../Index/index.html">进入Ufun</a>
		</div>
	</body>
	<script type="text/javascript">
		let current;
		document.addEventListener('plusready', function() {
			GetStatusTop();
			current = plus.webview.currentWebview();
			DoShow(current);
		});
	</script>
</html>
